<template>
  <ele-modal
    form
    :width="800"
    :model-value="modelValue"
    title="报价详情"
    @update:modelValue="updateModelValue"
  >
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        border
        stripe
      />
    </ele-card>
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { pageInsuranceDetailList } from '@/api/company';
  const emit = defineEmits(['done', 'update:modelValue']);
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,

    offerId: {
      type: Number,
      default: 0
    }
  });

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = ref([
    {
      prop: 'title',
      label: '项目'
    },
    {
      width: 130,
      prop: 'max_pay',
      label: '保额'
    },
    {
      width: 130,
      prop: 'price',
      label: '价格'
    }
  ]);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pageInsuranceDetailList({
      ...where,
      ...orders,
      page,
      limit,
      offer_id: props.offerId
    });
  };
  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        console.log('打开');
      } else {
        console.log('关闭');
      }
    }
  );
</script>
